FlyTalk.views.ServicesView = Ext.extend(Ext.TabPanel, {
	id: 'ServiceView',
	scroll: false,
    indicator: true,
    fullscreen: true,
    layout: 'card', 
	title: 'ServiceView',
        
	items: [
		{
			title: 'Tab 1',
			html : '1',
			cls  : 'card1',     
		},
		{
			title: 'Tab 2',
			html : '2',
			cls  : 'card2',
		},
    ],
	

	tabBar:{
        dock: 'bottom', // will put the menu on the bottom of the screen
		layout:{
			type: 'hbox',
			pack: 'center' // this will center the menu
        },		
    },


    initComponent: function () {
		
    	this.backButton = new Ext.Button({
		
			iconCls: 'home',
			iconMask: true,
			handler: this.backButtonTap,
			scope: this
		});
    	
		this.toolbar = new Ext.Toolbar({
			title: 'Services',
			doc: 'top',
			layout: 'hbox',
			items: [
			    this.backButton,
				{xtype: 'spacer'},
				//this.composeButton,
			]
		});
		
		this.dockedItems = [this.toolbar];
		
		Ext.apply(FlyTalk.views, {
				ServicesTabNearView: new FlyTalk.views.ServicesTabNearView(),
				ServicesTabGateView: new FlyTalk.views.ServicesTabGateView(), 
				ServicesTabAllView: new FlyTalk.views.ServicesTabAllView(), 
				
        });
           

		this.items = [
			FlyTalk.views.ServicesTabAllView, 
			FlyTalk.views.ServicesTabGateView, 
			FlyTalk.views.ServicesTabNearView
			
		];
		
		FlyTalk.views.ServicesView.superclass.initComponent.call(this);
        
    },
    
	//home button
    backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },

});